<template>
    <section class="QuickPanel__container">
        <div class="title__panel">
            <span class="title">{{ title }}</span>
            <span class="subtitle"><slot name="subtitle"></slot></span>
        </div>
        <div class="content">
            <div v-if="!collapse">
                <slot>暂无数据</slot>
            </div>

            <div v-else>已收起</div>
        </div>
    </section>
</template>

<script>
import QuickIconButton from "./QuickIconButton.vue";
export default {
    components: { QuickIconButton },
    props: {
        title: {
            type: String,
            default: "标题",
        },
    },
    data() {
        return {
            collapse: false,
        };
    },
};
</script>

<style lang="scss" scoped>
.QuickPanel__container {
    display: flex;
    flex-direction: column;
    padding: 10px;

    .title__panel {
        display: flex;
        align-items: center;
        margin: 20px 0;

        .title {
            font-size: 2.4rem;
            font-weight: 400;
            color: #000;
            min-width: 100px;
        }

        .subtitle {
            color: #999;
            font-size: 1.2rem;
            margin-left: 15px;
            flex: 1;
        }

        .btn {
            color: #999;
            font-weight: bold;
            margin-right: 5px;

            &:hover {
                color: #333;
                cursor: pointer;
                // font-size: 1.8rem;
            }
        }
    }

    .content {
        padding: 10px 0;
    }
}
</style>
